<template>
  <div class="goodslist">
    <div class="toop">
      <div class="ctitle">
        <div class="cp">
          <img src="../../assets/image/x_miniprogram_dm.png" alt />
        </div>
        <div class="csearch">
          <img class="csearch-pic" src="../../assets/image/search.png" alt />
          <input type="text" placeholder="按内容进行搜索" />
        </div>
      </div>
      <div class="nav-bottom">
        <div class="top-list">
          <ul class="lb">
            <li>综合推荐</li>
            <li>销量</li>
            <li>价格</li>
            <li>好评度</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <li>店铺</li>
            <div class="fla">
              <img src="#" alt />
              <span>筛选</span>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <div class="sx">
      <div class="sxl">筛选11.11大促商品</div>
    </div>
    <div class="goods-list-box">
        <div :is="'router-link'" to='./goodsdetail' class="goods-list">
            <div class="goods-left">
                <img src="../../assets/image/01.png" alt="">
            </div>
            <div class="goods-right">
                <p>溪牧原山茶花洁面泡沫 氨基酸...</p>
                <p>敏感肌可用，控油祛痘、男女可用...</p>
                <div class="goods-one">
                    <span><b>&yen;</b>999</span>
                    <span>￥1099</span>
                    <span>999人已付款</span>
                </div>
                <div class="goods-two">11.11限时299元起</div>
                <div class="goods-three">
                    <span>999条评论</span>
                    <span>99.9%好评</span>
                </div>
            </div>
        </div>
        <div :is="'router-link'" to='./goodsdetail' class="goods-list">
            <div class="goods-left">
                <img src="../../assets/image/01.png" alt="">
            </div>
            <div class="goods-right">
                <p>溪牧原山茶花洁面泡沫 氨基酸...</p>
                <p>敏感肌可用，控油祛痘、男女可用...</p>
                <div class="goods-one">
                    <span><b>&yen;</b>999</span>
                    <span>￥1099</span>
                    <span>999人已付款</span>
                </div>
                <div class="goods-two">11.11限时299元起</div>
                <div class="goods-three">
                    <span>999条评论</span>
                    <span>99.9%好评</span>
                </div>
            </div>
        </div>
        <div :is="'router-link'" to='./goodsdetail' class="goods-list">
            <div class="goods-left">
                <img src="../../assets/image/01.png" alt="">
            </div>
            <div class="goods-right">
                <p>溪牧原山茶花洁面泡沫 氨基酸...</p>
                <p>敏感肌可用，控油祛痘、男女可用...</p>
                <div class="goods-one">
                    <span><b>&yen;</b>999</span>
                    <span>￥1099</span>
                    <span>999人已付款</span>
                </div>
                <div class="goods-two">11.11限时299元起</div>
                <div class="goods-three">
                    <span>999条评论</span>
                    <span>99.9%好评</span>
                </div>
            </div>
        </div>
        <div :is="'router-link'" to='./goodsdetail' class="goods-list">
            <div class="goods-left">
                <img src="../../assets/image/01.png" alt="">
            </div>
            <div class="goods-right">
                <p>溪牧原山茶花洁面泡沫 氨基酸...</p>
                <p>敏感肌可用，控油祛痘、男女可用...</p>
                <div class="goods-one">
                    <span><b>&yen;</b>999</span>
                    <span>￥1099</span>
                    <span>999人已付款</span>
                </div>
                <div class="goods-two">11.11限时299元起</div>
                <div class="goods-three">
                    <span>999条评论</span>
                    <span>99.9%好评</span>
                </div>
            </div>
        </div>
        <div :is="'router-link'" to='./goodsdetail' class="goods-list">
            <div class="goods-left">
                <img src="../../assets/image/01.png" alt="">
            </div>
            <div class="goods-right">
                <p>溪牧原山茶花洁面泡沫 氨基酸...</p>
                <p>敏感肌可用，控油祛痘、男女可用...</p>
                <div class="goods-one">
                    <span><b>&yen;</b>999</span>
                    <span>￥1099</span>
                    <span>999人已付款</span>
                </div>
                <div class="goods-two">11.11限时299元起</div>
                <div class="goods-three">
                    <span>999条评论</span>
                    <span>99.9%好评</span>
                </div>
            </div>
        </div>
        <div :is="'router-link'" to='./goodsdetail' class="goods-list">
            <div class="goods-left">
                <img src="../../assets/image/01.png" alt="">
            </div>
            <div class="goods-right">
                <p>溪牧原山茶花洁面泡沫 氨基酸...</p>
                <p>敏感肌可用，控油祛痘、男女可用...</p>
                <div class="goods-one">
                    <span><b>&yen;</b>999</span>
                    <span>￥1099</span>
                    <span>999人已付款</span>
                </div>
                <div class="goods-two">11.11限时299元起</div>
                <div class="goods-three">
                    <span>999条评论</span>
                    <span>99.9%好评</span>
                </div>
            </div>
        </div>
    </div>
    <div class="gfix">
        <img src="../../assets/image/bars.png" alt="">
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.goodslist {
  width: 100vw;
  height: 100vh;
}
.toop {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
}
.ctitle {
  width: 100%;
  height: 1.4rem;
}
.ctitle .cp {
  width: 100%;
  height: 0.88rem;
}
.ctitle .cp img {
  width: 100%;
  height: 100%;
}
.ctitle .csearch {
  margin: 0 auto;
  width: 3.55rem;
  height: 0.52rem;
  display: flex;
  align-items: center;
  position: relative;
}
.csearch input {
  width: 3.55rem;
  height: 0.32rem;
  padding-left: 0.34rem;
  font-size: 0.14rem;
  color: #999999;
}
.csearch-pic {
  position: absolute;
  left: 0.12rem;
  top: 0.18rem;
  width: 0.16rem;
  height: 0.16rem;
}
.nav-bottom {
  width: 100%;
  height: 0.32rem;
  position: relative;
}
.top-list {
  width: 100%;
  color: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: 0.65rem;
}
.fla {
  width: 0.65rem;
  height: 0.32rem;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  font-size: 0.16rem;
  background-image: linear-gradient(180deg, #ff7a68 0%, #ff8a80 100%);
}
.fl img {
  width: 0.11rem;
  height: 0.12rem;
}
.lb {
  height: 0.32rem;
  display: flex;
}
li {
  text-align: center;
  padding: 0px 0.05rem;
  white-space: nowrap;
  font-size: 0.16rem;
}
.sx {
  width: 100%;
  padding: 0.1rem 0;
}
.sxl {
  width: 3.55rem;
  height: 0.32rem;
  background: #fff4f2;
  border: 0 solid #ff6040;
  border-radius: 2px;
  margin: 0 auto;
  text-align: center;
  line-height: 0.32rem;
  font-size: 16px;
  color: #ff6040;
}
.goods-list-box {
    margin: 0 auto;
    width: 100%;
    
}
.goods-list {
    width: 3.56rem;
    height: 1.09rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: .2rem;

}
.goods-left img {
    width: 1.08rem;
    height: 1.09rem;    
}
.goods-left {
    width: 1.08rem;
    height: 1.09rem; 
    margin-right: .15rem;
}
.goods-right {
    flex: 1;
}
.goods-right p:nth-of-type(1) {
    font-size: .16rem;
}
.goods-right p:nth-of-type(2) {
    font-size: .14rem;
    color: #999;
}
.goods-one b{
    font-size: .12rem;
    color: #FF6040;

}
.goods-one span:nth-of-type(1) {
    font-size: .2rem;
    color: #FF6040;
}
.goods-one span:nth-of-type(2) {
    font-size: .12rem;
    color: #999999 ;
    text-decoration: line-through;
}
.goods-one span:nth-of-type(3) {
    font-size: .12rem;
    color: #999999 ;
    display: inline-block;
    margin-left: .1rem;
}
.goods-two {
    width: .83rem;
    height: .16rem;
    background-color: #FF8066;
    line-height: .16rem;
    text-align: center;
    color: #FFFFFF ;
    margin-bottom: .05rem;
}
.goods-three {
    color: #999999 ;
}
.goods-three span:nth-of-type(2) {
    display: inline-block;
    margin-left: .1rem;
}
.gfix {
    width: 1.34rem;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform:translate(-50% , 0)
}
.gfix img {
    width: 1.34rem;
    height: .34rem;
}


</style>